<template>
    <!-- 设置里的用户个人信息 -->
    <ContentPanel :showTopBorder="false">
        <div class="show-info" v-if="showType == 'userInfo'">
            <div class="user-info">
                <UserBaseInfo :userInfo="userInfo"></UserBaseInfo>
                <div class="more-op">
                    <el-dropdown placement="bottom-end" trigger="click">
                        <span class="el-dropdown-link">
                            <div class="iconfont icon-gengduo"></div>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="changePart('infoEdit')">修改个人信息</el-dropdown-item>
                                <el-dropdown-item @click="changePart('passwordEdit')">修改密码</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
            <div class="part-item">
                <div class="part-title">朋友权限</div>
                <div class="part-content">
                    {{ userInfo.joinType == "JOIN_DIRECTLY" ? "直接添加" : "需要验证" }}
                </div>
            </div>
            <div class="part-item">
                <div class="part-title">个性签名</div>
                <div class="part-content">
                    {{ userInfo.personalSignature || '-' }}
                </div>
            </div>
            <div class="logout">
                <el-button type="primary" @click="logout">退出登录</el-button>
            </div>
        </div>
        <div v-else-if="showType == 'infoEdit'">
            <UserInfoEdit :userInfo="userInfo" @editBack="editBack"></UserInfoEdit>
        </div>
        <div v-else-if="showType == 'passwordEdit'">
            <UserInfoPassword @editBack="editBack"></UserInfoPassword>
        </div>
    </ContentPanel>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, watch } from "vue"
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

import UserInfoEdit from "./UserInfoEdit.vue";
import UserInfoPassword from "./UserInfoPassword.vue";

const showType = ref('userInfo')
const userInfo = ref({});

const getUserInfo = async () => {
    let result = await proxy.Request({
        method: "get",
        url: proxy.Api.getUserInfo,
        params: {
        }
    })
    if (!result) {
        return;
    }
    userInfo.value = result.data;
}
getUserInfo();

/* 点击切换右侧页面 */
const changePart = (type) => {
    showType.value = type;
}

const logout = () => {
    proxy.Confirm({
        message: "确定要退出登录吗？",
        okFun: async () => {
            myApi.reLogin();  // 回到登陆页面等
            let result = await proxy.Request({
                method: "delete",
                url: proxy.Api.logout,
            })
            if (!result) {
                return;
            }
        }
    })
}

/* 修改信息结束，回到用户界面并重新获取用户信息 */
const editBack = () => {
    showType.value = 'userInfo';
    getUserInfo();
}
</script>

<style lang="scss" scoped>
.show-info {
    .user-info {
        position: relative;

        .more-op {
            position: absolute;
            right: 0;
            top: 20px;

            .icon-gengduo {
                color: #9e9e9e;

                &:hover {
                    background: #dddddd;
                }
            }
        }
    }

    .part-item {
        display: flex;
        border-bottom: 1px solid #eaeaea;
        padding: 20px 0;

        .part-title {
            width: 60px;
            color: #9e9e9e;
        }

        .part-content {
            flex: 1;
            margin-left: 15px;
            color: #161616;
        }
    }

    .logout {
        text-align: center;
        margin-top: 20px;
    }
}
</style>
